<template>
	<div>
		<search ref="typeSearch" @closeSearch="closeSearch" is-disableinput="true"></search>
		<div class="typeList">
			<div class="box clear">
				<div class="leftV fl">
					<ul>
						<li :class ="{active:typeState == item.cate_id}" v-for="(item,index) of typeList" @click="clickTopcateItem(item.cate_id)" :key = index>{{item.name}}</li>
					</ul>
				</div>
				<div class="rightV fr">
					
					<!--<div class="page-navbar">
    		
    					<mt-navbar class="page-part" v-model="selected">
      						<mt-tab-item  v-for="(item,index) of typeList" id="1" >{{item.cate_name}}</mt-tab-item>
							 <mt-tab-item id="1">选项一</mt-tab-item>

 							<mt-tab-item id="2">选项二选项二</mt-tab-item>
 							<mt-tab-item id="3">选项二选项二</mt-tab-item>
 							<mt-tab-item id="4">选项二选项二</mt-tab-item>
 							<mt-tab-item id="5">选项二选项二</mt-tab-item>
 							<mt-tab-item id="6">选项二选项二</mt-tab-item>
 							<mt-tab-item id="7">选项二选项二</mt-tab-item>
 							<mt-tab-item id="8">选项二选项二</mt-tab-item>
 							<mt-tab-item id="9">选项二选项二</mt-tab-item>							
    					</mt-navbar>
    				</div>-->

					
					<div :class= [box,heightObj] class="box">
						<ul>
							<li v-for="(item,index) of goodsList" :key ="index"> 
								<router-link to="/">
                               	 	<div class="goodsImg">
                                    	<img src="https://img12.360buyimg.com/babel/s360x360_jfs/t17515/256/1947534381/244203/f54cd223/5adef415Nf7a0a895.jpg!q80.webp" alt="">
                                	</div>
                                	<div class="goodsTxt">
                                		{{item.cate_name}}
                                	</div>
                            	</router-link>
							</li>
						</ul>
					</div>
				</div>
			</div>	
		</div>
	</div>

	
</template>

<script>
	import search from  './search.vue'
	import api from '../../api/api'

	export default{		
  		name: 'page-navbar',
		data(){
			return{
				allCateList:[],
            	typeList:[],
				typeState:1,
				goodsList:[],
				winHeight:0,
				box:{paddingTop:'0.7rem',paddingLeft:'0.45rem',overFlow: 'hidden'},
				heightObj:{minHeight:'winHeight',height:'100%'},
				selected:1
			}
		},
		methods:{
			closeSearch(){
				this.$router.go(-1);
				this.$store.state.showBottomTab = true;
			},
			clickTopcateItem(cateId){
				this.typeState = cateId;
            	this.getSecCategorylist(cateId);
			},
			getSecCategorylist(topCateId){
				var default_item = '';
				for (let [index,item] of Object.getOwnPropertyNames(this.allCateList).entries()){
					if(!default_item){
                    	default_item = item;
                	}
					if(item == topCateId){
						this.goodsList = this.allCateList[item].item;
					}
				}
				
				if(this.goodsList[0]['id'] == ' ' || this.goodsList[0]['id'] == '' || !this.goodsList[0]['id']){
                this.goodsList= [];
           		}
            	if(this.goodsList.length === 0){
                	this.goodsList = this.allCateList[default_item].item;
                	this.typeState = default_item;
            	}
			}
		},
		created(){
			
			this.winHeight = document.body.clientHeight;
			console.log(this.winHeight);
			var that = this;
        	this.typeState = this.$router.history.current.params.cate_id;
        	api.home.topSecCategory().then((res)=>{
        		
//      		console.log('hometopcate---'+JSON.stringify(res.data));
        		if(res.ret == 200&&res.data){

        			that.allCateList = res.data;
        			for (let [index,item] of Object.getOwnPropertyNames(res.data).entries()){

        				that.typeList.push({name:res.data[item].cate_name,cate_id:res.data[item].id})
        			}
					
					this.getSecCategorylist(that.typeState);
					
        		}
        	})
        	
		},
		components:{
			search
		}
	}
</script>

<style lang="css" scoped>
	.typeList{padding-top:0rem;/*min-height: 100%;*/}
    .typeList .box{font-size: .37rem;overflow: hidden;height: 100%;}   
    .typeList .box>.leftV{width:21.5%;position: absolute;background: #f2f2f2;height:93.5%;}  
    .typeList>.box>.leftV ul li{padding:0.35rem 0;text-align:center;font-size: .3rem;}	
	.typeList>.box>.leftV ul li.active{background:#F6F6F6;border-bottom: .08rem solid rgba(221,221,221,.6);}	
	.typeList>.box>.rightV{margin-left:21.5%;width:78.5%;padding-left: 12.5%;padding-top:.7rem;position: relative;}	
	.mint-navbar {background-color: #fff;display: -webkit-box;display: -ms-flexbox;display: flex;text-align: center;position: absolute;left: 0rem; top: 0rem;}
	.typeList>.box>.rightV>.box{height: auto;min-height: 15rem;}
	.typeList>.box>.rightV>.box ul li{float:left;width:50%;position:relative;padding-bottom: .7rem;}
	.typeList>.box>.rightV>.box ul li .a{position:relative;display:block;}
	.typeList>.box>.rightV>.box ul li .goodsImg{height:1.45rem;width:1.45rem;position:relative;}
	.typeList>.box>.rightV>.box ul li .goodsImg img{width:100%;display:block;}
	.typeList>.box>.rightV>.box ul li .goodsTxt{margin-top: .2rem;text-align: center;font-size: .2rem;width: 1.45rem;}


</style>